<!-- 搜索合同范本页面 -->
<template>
	<view>
		<view class="contrach-template-item" v-for="tempItem in contractDataList" :key="tempItem.id" @click="tempItemClick(tempItem.id)">
			<view class="img-box">
				<u-image width="52" height="65" :src="vuex_url + '/static/imgs/word.png'"></u-image>
			</view>
			<view class="u-line-1">{{tempItem.title}}</view>
			<view class="time-text">{{tempItem.time}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟的根据合同类别 id 搜索到的合同第二层列表数据
				contractDataList: [{
					id: 1,
					title: '实习劳动合同范本',
					time: '2021-01-21'
				},{
					id: 2,
					title: '实习劳动合同范本',
					time: '2021-01-21'
				},{
					id: 3,
					title: '实习劳动合同范本',
					time: '2021-01-21'
				},{
					id: 4,
					title: '实习劳动合同范本',
					time: '2021-01-21'
				},{
					id: 5,
					title: '实习劳动合同范本',
					time: '2021-01-21'
				}],
			};
		},
		methods: {
			// 监听模板项的点击事件 携参跳转到对应模板详情页
			tempItemClick(id) {
				this.$u.route('/myPackageA/pages/views/contract-template-detail?id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contrach-template-item {
		height: 113rpx;
		padding: 16rpx 26rpx 18rpx 100rpx;
		border-bottom: 1px solid #F5F5F5;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		.img-box {
			position: absolute;
			top: 50%;
			left: 26rpx;
			transform: translateY(-50%);
		}
		.time-text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		
	}
</style>
